<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>易果蔬</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<div class="page-group" style="display: none">
    <div class="page page-current" id="index">
        <header class="bar bar-nav">
            <h1 class="title title-bg">易果蔬</h1>
        </header>
        <nav class="bar bar-tab dbar-tab borderT">
            <a class="tab-item external active" href="./index.html">
                <span class="icon"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item external" href="./myOrder.html">
                <span class="icon icon-order"></span>
                <span class="tab-label">订单</span>
            </a>
            <a class="tab-item external" href="./me.html">
                <span class="icon icon-my"></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>

        <div class="content">
            <!-- search begin -->
            <div class="grid-demo piaof">
                <div class="row daearch">
                    <div class="col-25 tac">
                        <a href="#recommend" class="recommend-box">
                            <i class="recommend-icon"></i>
                            <p class="fs65 c9 margin0">推荐朋友</p>
                        </a>
                    </div>
                    <div class="col-50">
                        <div class="searchbar">
                            <div class="search-input">
                                <form id="indexSearchForm" onsubmit="false">
                                    <label class="icon icon-search"></label>
                                    <input class="fn-searc" type="search" name="productName" placeholder='请输入商品名'/>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-25 tac">
                        <a href="./shopCart.html" class="cart-iconB external" >
                            <span class="badge" style="display:none;"></span>
                            <i class="cart-icon"></i>
                            <p class="fs65 c9 margin0">购物车</p>
                        </a>
                    </div>
                </div>
            </div>
            <!-- search end -->

            <!-- content begin -->
            <div class="row no-gutter pt65">
                <ul class="menu load-template" id="productMenu"></ul>
                <div class="col-25">&nbsp;</div>
                <div class="col-75 bgf fn-rightBox load-template" id="productList">
                </div>
            </div>
            <!-- content end -->
        </div>
    </div>
    <div class="page bgh" id="recommend">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left back dback" href="#yhq">
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title title-bg">有奖推荐</h1>
        </header>
        <div class="content">
            <form action="./json/recommend.json" method="post" onsubmit="false" id="recommendForm" >
                <div class="borderB bgf ptb1 tac">
                    <span class="c9 fs75">推荐朋友加入易果蔬</span>
                    <p class="margin0 pink fs75">¥ <span style="font-size:2.15rem">30.00</span></p>
                    <span>朋友注册成功，您可获得30元！</span>
                </div>
                <div class="borderB bgf mt25h">
                    <div class="content-padded fs75">
                        <div class="row no-gutter borderB pt5h pb5h">
                            <div class="col-25">
                                <p class="c3 fs75 margin0">朋友姓名</p>
                            </div>
                            <div class="col-75 tar">
                                <input type="text required" name="friend" class="wall border0" placeholder="请点击输入" />
                            </div>
                        </div>
                        <div class="row no-gutter pt5h">
                            <div class="col-25">
                                <p class="c3 fs75 margin0">朋友电话</p>
                            </div>
                            <div class="col-75 tar">
                                <input type="text required tel" name="tel" class="wall border0" placeholder="请点击输入" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-100">
                            <button class="button button-big button-fill button-success red-btn" type="submit" style="width: 100%">提交</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="page" id="search" style="background: #fff;">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left back dback" href="#index">
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title title-bg">搜索</h1>
        </header>
        <div class="bar bar-header-secondary">
            <div class="searchbar">
                <a class="searchbar-cancel" href="javascript:void(0)" id="submitForm">搜索</a>
                <div class="search-input rel">
                    <form id="SearchForm" onsubmit="false">
                        <label class="icon icon-search"></label>
                        <input class="fn-searc" type="search" name="productName" placeholder='请输入商品名'/>
                        <i class="null-icon"></i>
                    </form>
                </div>
            </div>
        </div>
        <div class="content ss-box" style="display: none">
            <div class="content-padded">
                <p class="clear">
                    <span class="search-ls fl"></span>
                    <span class="c6 fs75 fl">搜索历史</span>
                </p>
            </div>
            <div class="row">
                <div class="col-100 searchList" id="searchHistory"></div>
            </div>
            <div class="row mt15h">
                <div class="col-100 tac">
                    <a href="#" class="null-btn">清空搜索记录</a>
                </div>
            </div>
        </div>
        <div class="content search-result">
            <h1 class="c6 fs75 fwn borderB load-template" id="resultCount"></h1>
            <div class="content-padded load-template" id="resultData"></div>
        </div>
    </div>
</div>
</body>
</html>